import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Bar,
  PieChart,
  Pie,
  Cell,
  Legend,
  BarChart,
} from 'recharts'
import { 
  TrendingUp, 
  TrendingDown, 
  PieChart as PieIcon, 
  Activity,
  CreditCard,
} from 'lucide-react'

interface EquityChartProps {
  data: Array<{
    date: string
    equity: number
    benchmark?: number
  }>
  height?: number
  showBenchmark?: boolean
}

export function EquityChart({ data, height = 400, showBenchmark = true }: EquityChartProps) {
  const formatCurrency = (value: number) => {
    return new Intl.NumberFormat('en-US', {
      style: 'currency',
      currency: 'USD',
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(value)
  }

  const CustomTooltip = ({ active, payload, label }: any) => {
    if (active && payload && payload.length) {
      return (
        <div className="bg-black/95 border border-gray-700 rounded-lg p-3 text-white">
          <p className="text-sm font-medium mb-2">{label}</p>
          <div className="space-y-1">
            <p className="text-xs">
              <span className="inline-block w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
              Equity: {formatCurrency(payload[0].value)}
            </p>
            {showBenchmark && payload[1] && (
              <p className="text-xs">
                <span className="inline-block w-3 h-3 bg-gray-500 rounded-full mr-2"></span>
                Benchmark: {formatCurrency(payload[1].value)}
              </p>
            )}
          </div>
        </div>
      )
    }
    return null
  }

  return (
    <div className="modern-card">
      <div className="modern-card-header">
        <h3 className="text-lg font-semibold text-text-primary flex items-center gap-2">
          <TrendingUp className="w-5 h-5 text-primary-500" />
          Equity Performance
        </h3>
      </div>
      <div className="modern-card-body">
        <ResponsiveContainer width="100%" height={height}>
          <LineChart data={data}>
            <CartesianGrid strokeDasharray="3 3" opacity={0.2} />
            <XAxis 
              dataKey="date" 
              stroke="#848E9C"
              fontSize={12}
              tickFormatter={(date) => new Date(date).toLocaleDateString()}
            />
            <YAxis 
              stroke="#848E9C"
              fontSize={12}
              tickFormatter={formatCurrency}
            />
            <Tooltip content={<CustomTooltip />} />
            <Line
              type="monotone"
              dataKey="equity"
              stroke="#3b82f6"
              strokeWidth={2}
              dot={{ fill: '#3b82f6', strokeWidth: 2, r: 4 }}
              activeDot={{ r: 6, strokeWidth: 2 }}
            />
            {showBenchmark && (
              <Line
                type="monotone"
                dataKey="benchmark"
                stroke="#6b7280"
                strokeWidth={1}
                strokeDasharray="5 5"
                dot={false}
              />
            )}
          </LineChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}

export function PerformanceMetrics() {
  const metrics = [
    { label: 'Total Return', value: '+23.5%', change: '+12.3%', icon: TrendingUp, color: 'text-success-500' },
    { label: 'Sharpe Ratio', value: '1.87', change: '+0.4', icon: Activity, color: 'text-primary-500' },
    { label: 'Max Drawdown', value: '-8.2%', change: '-3.1%', icon: TrendingDown, color: 'text-error-500' },
    { label: 'Win Rate', value: '78.5%', change: '+5.2%', icon: Activity, color: 'text-warning-500' },
  ]

  return (
    <div className="modern-card">
      <div className="modern-card-header">
        <h3 className="text-lg font-semibold text-text-primary flex items-center gap-2">
          <PieIcon className="w-5 h-5 text-primary-500" />
          Performance Metrics
        </h3>
      </div>
      <div className="modern-card-body">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {metrics.map((metric, index) => (
            <div key={index} className="flex items-center justify-between p-4 bg-panel-bg rounded-lg border border-panel-border hover:border-primary-500/50 transition-all duration-200">
              <div className="flex items-center gap-3">
                <div className="p-2 bg-primary-500/10 rounded-lg">
                  <metric.icon className="w-4 h-4 text-primary-500" />
                </div>
                <div>
                  <div className="text-sm text-text-secondary">{metric.label}</div>
                  <div className={`text-lg font-bold ${metric.color}`}>{metric.value}</div>
                </div>
              </div>
              <div className={`text-sm font-medium ${metric.color}`}>
                {metric.change}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

export function AssetAllocation() {
  const data = [
    { name: 'Bitcoin', value: 45, color: '#f2a900' },
    { name: 'Ethereum', value: 30, color: '#627eea' },
    { name: 'Alt Coins', value: 15, color: '#ff6b6b' },
    { name: 'Stablecoins', value: 10, color: '#00b894' },
  ]

  return (
    <div className="modern-card">
      <div className="modern-card-header">
        <h3 className="text-lg font-semibold text-text-primary flex items-center gap-2">
          <CreditCard className="w-5 h-5 text-primary-500" />
          Asset Allocation
        </h3>
      </div>
      <div className="modern-card-body">
        <div className="flex items-center justify-center">
          <ResponsiveContainer width={300} height={300}>
            <PieChart data={data}>
              <Pie
                dataKey="value"
                nameKey="name"
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={60}
                outerRadius={100}
                paddingAngle={4}
                labelLine={false}
                label={(entry) => `${entry.name}: ${entry.value}%`}
              >
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={entry.color} />
                ))}
              </Pie>
              <Legend />
            </PieChart>
          </ResponsiveContainer>
        </div>
      </div>
    </div>
  )
}

export function TradingVolumeChart() {
  const data = [
    { name: 'Mon', volume: 1200 },
    { name: 'Tue', volume: 1900 },
    { name: 'Wed', volume: 3200 },
    { name: 'Thu', volume: 2100 },
    { name: 'Fri', volume: 4200 },
    { name: 'Sat', volume: 2800 },
    { name: 'Sun', volume: 1500 },
  ]

  return (
    <div className="modern-card">
      <div className="modern-card-header">
        <h3 className="text-lg font-semibold text-text-primary flex items-center gap-2">
          <Activity className="w-5 h-5 text-primary-500" />
          Trading Volume
        </h3>
      </div>
      <div className="modern-card-body">
        <ResponsiveContainer width="100%" height={200}>
          <BarChart data={data}>
            <CartesianGrid strokeDasharray="3 3" opacity={0.2} />
            <XAxis dataKey="name" stroke="#848E9C" fontSize={12} />
            <YAxis stroke="#848E9C" fontSize={12} />
            <Tooltip />
            <Bar 
              dataKey="volume" 
              fill="#3b82f6"
              radius={[4, 4, 0, 0]}
            />
          </BarChart>
        </ResponsiveContainer>
      </div>
    </div>
  )
}